<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>计算属性和监视</title>
</head>

<body>
  <!--
        1. 计算属性
              - 计算属性是基于它们的响应式依赖进行缓存的，只有在相关响应式依赖发生改变时才会重新求值
                   computed: {
                     now: function () {
                       return Date.now()
                     }
                   }

                   上述的计算属性将不再更新，因为Date.now()不是响应式依赖

              - 计算属性默认只有getter，不过在需要时也可以提供一个setter       


        2. 侦听属性
              - 可以通过vm对象的$watch()或 watch来设置    
              - deep: true 设置为深度侦听         

  -->
  <div id="app">
    姓: <input type="text" v-model="firstName"><br>
    名: <input type="text" v-model="lastName"><br>

    姓名(单向): <input type="text" v-model="fullName"><br>
    姓名(双向): <input type="text" v-model="fullName2"><br>
    姓名(侦听): <input type="text" v-model="watchFullName">
  </div>

  <script type="text/javascript" src="./js/vue.js"></script>
  <script type="text/javascript">
    const vm = new Vue({
      el: '#app',
      data: {
        firstName: 'A',
        lastName: 'B',
        watchFullName: 'A B'
      },
      // 计算属性
      computed: {
        fullName: function () { // 默认作为计算属性的getter函数
          return this.firstName + ' ' + this.lastName; // 只有在响应式依赖firstName或lastName改变的时候，才会重新求值
        },

        fullName2: {
          get: function () {
            return this.firstName + ' ' + this.lastName
          },
          // 运行vm.fullName2 = 'John Doe'时，setter会被调用
          set: function (newValue) {
            var names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[names.length - 1];
          }
        }
      },
      // 侦听属性
      watch: {
        // 侦听firtName
        firstName: function (val) {
          this.watchFullName = val + ' ' + this.lastName;
        },
        // 侦听lastName
        lastName: function (val) {
          this.watchFullName = this.firstName + ' ' + val;
        }
      }

    })

    // 侦听属性
    // vm.$watch('lastName', function (val) {
    //   console.log('$watch lastName', val)
    //   this.watchFullName = this.firstName + ' ' + val
    // })

  </script>
</body>

</html>